<script setup lang="ts"></script>

<template>
	<div :class="$style.app">
		<header :class="$style.appHeader" v-if="$slots.header">
			<slot name="header"></slot>
		</header>
		<footer :class="$style.appFooter" v-if="$slots.footer">
			<slot name="footer"></slot>
		</footer>
		<div :class="$style.appRightPanel" v-if="$slots.rightPanel">
			<slot name="rightPanel"></slot>
		</div>
	</div>
</template>

<style module>
.app {
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.appHeader {
	background-color: #fff;
	height: 60px;
	line-height: 60px;
	pointer-events: all;
}

.appRightPanel {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 0;
	width: 274px;
	height: 100%;
	overflow-y: auto;
	pointer-events: all;
	padding: 0 5px;
}

.appFooter {
	position: absolute;
	right: 274px;
	left: 0;
	bottom: 20px;
	pointer-events: all;
}
</style>